<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="订单" :statusBar='true' :fixed="true"></uni-nav-bar>
		<!-- #endif -->
		<view class="order">
			<view class="order-title">
				<view @click="onClickSelectIndex(0)" :class="{ active: selectIndex === 0 }" class="order-title-all">全部订单</view>
				<view @click="onClickSelectIndex(1)" :class="{ active: selectIndex === 1 }" class="order-title-nocomment">未支付({{ noPayTotal }})</view>
				<view @click="onClickSelectIndex(2)" :class="{ active: selectIndex === 2 }" class="order-title-nocomment">已支付({{ alreadyPayTotal }})</view>
				<view @click="onClickSelectIndex(3)" :class="{ active: selectIndex === 3 }" class="order-title-nocomment">已关闭({{ closePayTotal }})</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' scroll-y v-show="selectIndex === 0" @scrolltolower="onScrolltolowerAllOrderList" class="order-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' scroll-y v-show="selectIndex === 0" @scrolltolower="onScrolltolowerAllOrderList" class="order-list">
			<!-- #endif -->
				<view v-if="allOrderList !== undefined && allOrderList.length" class="order-list-item" v-for="(item, index) of allOrderList" :key="item.id">
					<view class="order-list-item-name">
						<text class="order-list-item-name-txt">{{ item.storeName }}</text>
						<text v-if="item.status === '1'" @click="onClickTSSJ(item)" class="order-list-item-name-status">投诉商家</text>
					</view>
					<view class="order-list-item-price">
						<text v-if="item.payAmount" class="order-list-item-price-left">实付：¥{{ item.payAmount }}</text>
						<text v-if="item.discountAmount" class="order-list-item-price-right">节省：¥{{ item.discountAmount }}</text>
					</view>
					<view class="order-list-item-line"></view>
					<view class="order-list-item-content">
						<!-- <image :src="commonImg('demo.jpg')" class="order-list-item-content-avatar"></image> -->
						<view class="order-list-item-content-info">
							<text class="order-list-item-content-info-ordernum">订单编号：{{ item.id }}</text>
							<text class="order-list-item-content-info-ordernum">下单时间：{{ item.createdAt }}</text>
							<text v-if="item.price" class="order-list-item-content-info-ordernum">小票金额：¥{{ item.price }}</text>
							<view class="order-list-item-content-info-ordernum">
								<text v-if="item.rate">会员折扣：{{ Math.floor(item.rate * 100) / 10 }}折</text>
							</view>
							<view class="order-list-item-content-info-ordernum order-list-item-content-info-ordernum-last">
								<text @click="onClickGotoZF(item)" v-if="item.status === '0'" class="order-list-item-content-info-ordernum-last-zlyd">前往支付</text>
								<text @click="onClickGotoZLYD" v-if="item.status === '1' || item.status === '2'" class="order-list-item-content-info-ordernum-last-zlyd">再来一单</text>
								<text @click="onClickGotoPLPage(item, 'go')" v-if="item.evaluating === '0' && item.status === '1'" class="order-list-item-content-info-ordernum-last-zlyd">去评论</text>
								<!-- <text @click="onClickGotoPLPage(item, 'see')" v-if="item.evaluating === '1' && item.status === '1'" class="order-list-item-content-info-ordernum-last-zlyd">查看评论</text> -->
								<text v-if="item.status === '0'" @click="onClickCancelItem(item)" class="order-list-item-content-info-ordernum-last-zlyd">取消订单</text>
								<text @click="onClickDelItem(item)" class="order-list-item-content-info-ordernum-last-zlyd">删除</text>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="noorder">
					<image class="noorder-img" :src="commonImg('noorder.png')"></image>
					<text class="noorder-txt">您暂时没有订单，快去首页逛逛吧~</text>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' scroll-y v-show="selectIndex === 1" @scrolltolower="onScrolltolowerNoPayOrderList" class="order-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' scroll-y v-show="selectIndex === 1" @scrolltolower="onScrolltolowerNoPayOrderList" class="order-list">
			<!-- #endif -->
				<view v-if="noPayOrderList !== undefined && noPayOrderList.length" class="order-list-item" v-for="(item, index) of noPayOrderList" :key="item.id">
					<view class="order-list-item-name">
						<text class="order-list-item-name-txt">{{ item.storeName }}</text>
					</view>
					<view class="order-list-item-price">
						<text v-if="item.payAmount" class="order-list-item-price-left">实付：¥{{ item.payAmount }}</text>
						<text v-if="item.discountAmount" class="order-list-item-price-right">节省：¥{{ item.discountAmount }}</text>
					</view>
					<view class="order-list-item-line"></view>
					<view class="order-list-item-content">
						<!-- <image :src="commonImg('demo.jpg')" class="order-list-item-content-avatar"></image> -->
						<view class="order-list-item-content-info">
							<text class="order-list-item-content-info-ordernum">订单编号：{{ item.id }}</text>
							<text class="order-list-item-content-info-ordernum">下单时间：{{ item.createdAt }}</text>
							<text v-if="item.price" class="order-list-item-content-info-ordernum">小票金额：¥{{ item.price }}</text>
							<view class="order-list-item-content-info-ordernum">
								<text v-if="item.rate">会员折扣：{{ Math.floor(item.rate * 100) / 10 }}折</text>
							</view>
							<view class="order-list-item-content-info-ordernum order-list-item-content-info-ordernum-last">
								<text @click="onClickGotoZF(item)" v-if="item.status === '0'" class="order-list-item-content-info-ordernum-last-zlyd">前往支付</text>
								<text @click="onClickGotoZLYD" v-if="item.status === '1' || item.status === '2'" class="order-list-item-content-info-ordernum-last-zlyd">再来一单</text>
								<text @click="onClickGotoPLPage(item, 'go')" v-if="item.evaluating === '0' && item.status === '1'" class="order-list-item-content-info-ordernum-last-zlyd">去评论</text>
								<!-- <text @click="onClickGotoPLPage(item, 'see')" v-if="item.evaluating === '1' && item.status === '1'" class="order-list-item-content-info-ordernum-last-zlyd">查看评论</text> -->
								<text v-if="item.status === '0'" @click="onClickCancelItem(item)" class="order-list-item-content-info-ordernum-last-zlyd">取消订单</text>
								<text @click="onClickDelItem(item, 0)" class="order-list-item-content-info-ordernum-last-zlyd">删除</text>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="noorder">
					<image class="noorder-img" :src="commonImg('noorder.png')"></image>
					<text class="noorder-txt">您暂时没有订单，快去首页逛逛吧~</text>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' scroll-y v-show="selectIndex === 2" @scrolltolower="onScrolltolowerAlreadyPayOrderList" class="order-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' scroll-y v-show="selectIndex === 2" @scrolltolower="onScrolltolowerAlreadyPayOrderList" class="order-list">
			<!-- #endif -->
				<view v-if="alreadyPayOrderList !== undefined && alreadyPayOrderList.length" class="order-list-item" v-for="item of alreadyPayOrderList" :key="item.id">
					<view class="order-list-item-name">
						<text class="order-list-item-name-txt">{{ item.storeName }}</text>
						<text @click="onClickTSSJ(item)" class="order-list-item-name-status">投诉商家</text>
					</view>
					<view class="order-list-item-price">
						<text v-if="item.payAmount" class="order-list-item-price-left">实付：¥{{ item.payAmount }}</text>
						<text v-if="item.discountAmount" class="order-list-item-price-right">节省：¥{{ item.discountAmount }}</text>
					</view>
					<view class="order-list-item-line"></view>
					<view class="order-list-item-content">
						<!-- <image :src="commonImg('demo.jpg')" class="order-list-item-content-avatar"></image> -->
						<view class="order-list-item-content-info">
							<text class="order-list-item-content-info-ordernum">订单编号：{{ item.id }}</text>
							<text class="order-list-item-content-info-ordernum">下单时间：{{ item.createdAt }}</text>
							<text v-if="item.price" class="order-list-item-content-info-ordernum">小票金额：¥{{ item.price }}</text>
							<view class="order-list-item-content-info-ordernum">
								<text v-if="item.rate">会员折扣：{{ Math.floor(item.rate * 100) / 10 }}折</text>
							</view>
							<view class="order-list-item-content-info-ordernum order-list-item-content-info-ordernum-last">
								<text @click="onClickGotoZF(item)" v-if="item.status === '0'" class="order-list-item-content-info-ordernum-last-zlyd">前往支付</text>
								<text @click="onClickGotoZLYD" v-if="item.status === '1' || item.status === '2'" class="order-list-item-content-info-ordernum-last-zlyd">再来一单</text>
								<text @click="onClickGotoPLPage(item, 'go')" v-if="item.evaluating === '0' && item.status === '1'" class="order-list-item-content-info-ordernum-last-zlyd">去评论</text>
								<!-- <text @click="onClickGotoPLPage(item, 'see')" v-if="item.evaluating === '1' && item.status === '1'" class="order-list-item-content-info-ordernum-last-zlyd">查看评论</text> -->
								<text v-if="item.status === '0'" @click="onClickCancelItem(item)" class="order-list-item-content-info-ordernum-last-zlyd">取消订单</text>
								<text @click="onClickDelItem(item, 1)" class="order-list-item-content-info-ordernum-last-zlyd">删除</text>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="noorder">
					<image class="noorder-img" :src="commonImg('noorder.png')"></image>
					<text class="noorder-txt">您暂时没有订单，快去首页逛逛吧~</text>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 3 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' scroll-y v-show="selectIndex === 3" @scrolltolower="onScrolltolowerClosePayOrderList" class="order-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 3 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' scroll-y v-show="selectIndex === 3" @scrolltolower="onScrolltolowerClosePayOrderList" class="order-list">
			<!-- #endif -->
				<view v-if="closePayOrderList !== undefined && closePayOrderList.length" class="order-list-item" v-for="(item, index) of closePayOrderList" :key="item.id">
					<view class="order-list-item-name">
						<text class="order-list-item-name-txt">{{ item.storeName }}</text>
					</view>
					<view class="order-list-item-price">
						<text v-if="item.payAmount" class="order-list-item-price-left">实付：¥{{ item.payAmount }}</text>
						<text v-if="item.discountAmount" class="order-list-item-price-right">节省：¥{{ item.discountAmount }}</text>
					</view>
					<view class="order-list-item-line"></view>
					<view class="order-list-item-content">
						<!-- <image :src="commonImg('demo.jpg')" class="order-list-item-content-avatar"></image> -->
						<view class="order-list-item-content-info">
							<text class="order-list-item-content-info-ordernum">订单编号：{{ item.id }}</text>
							<text class="order-list-item-content-info-ordernum">下单时间：{{ item.createdAt }}</text>
							<text v-if="item.price" class="order-list-item-content-info-ordernum">小票金额：¥{{ item.price }}</text>
							<view v-if="item.rate" class="order-list-item-content-info-ordernum">
								<text>会员折扣：{{ Math.floor(item.rate * 100) / 10 }}折</text>
							</view>
							<view class="order-list-item-content-info-ordernum order-list-item-content-info-ordernum-last">
								<text @click="onClickGotoZF(item)" v-if="item.status === '0'" class="order-list-item-content-info-ordernum-last-zlyd">前往支付</text>
								<text @click="onClickGotoZLYD" v-if="item.status === '1' || item.status === '2'" class="order-list-item-content-info-ordernum-last-zlyd">再来一单</text>
								<text @click="onClickGotoPLPage(item, 'go')" v-if="item.evaluating === '0' && item.status === '1'" class="order-list-item-content-info-ordernum-last-zlyd">去评论</text>
								<!-- <text @click="onClickGotoPLPage(item, 'see')" v-if="item.evaluating === '1' && item.status === '1'" class="order-list-item-content-info-ordernum-last-zlyd">查看评论</text> -->
								<text v-if="item.status === '0'" @click="onClickCancelItem(item)" class="order-list-item-content-info-ordernum-last-zlyd">取消订单</text>
								<text @click="onClickDelItem(item, 2)" class="order-list-item-content-info-ordernum-last-zlyd">删除</text>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="noorder">
					<image class="noorder-img" :src="commonImg('noorder.png')"></image>
					<text class="noorder-txt">您暂时没有订单，快去首页逛逛吧~</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js';
	import { myMixin } from '@/utils/mixin.js';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	// #ifdef H5
	const jweixin = require('../../utils/jweixin-module.js');
	// #endif
	export default {
		mixins: [myMixin],
		components: {
			uniNavBar
		},
		data() {
			return {
				appListHeight: 0,
				h5ListHeight: 0,
				selectIndex: 0,
				prepay_id: '',
				// 全部订单
				allOrderList: [],
				allPage: 1,
				allSize: 10,
				allTotal: 0,
				allTotalPage: 0,
				// 没有支付的
				noPayPage: 1,
				noPaySize: 10,
				noPayTotal: 0,
				noPayTotalPage: 0,
				noPayOrderList: [],
				// 已经支付的
				alreadyPayPage: 1,
				alreadyPaySize: 10,
				alreadyPayTotal: 0,
				alreadyPayTotalPage: 0,
				alreadyPayOrderList: [],
				// 关闭的订单
				closePayPage: 1,
				closePaySize: 10,
				closePayTotal: 0,
				closePayTotalPage: 0,
				closePayOrderList: [],
			};
		},
		methods: {
			// 返回
			back() {
				uni.navigateBack({})
			},
			// 判断公众号截取code
			getUrlParam(name) {
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				let r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return unescape(r[2]);
				}
				return null;
			},
			onClickGotoZLYD() {
				uni.showToast({
					icon: 'none',
					title: '功能正在开发中....'
				})
			},
			onClickGotoZF(obj) {
				// #ifdef H5
				if ((!uni.getStorageSync('openId')) && (!this.getUrlParam('code'))) {
					let url = window.location.href
					let new_url = encodeURIComponent(url)
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6246e0503023027f&redirect_uri=${new_url}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`
				} else if ((!uni.getStorageSync('openId')) && (this.getUrlParam('code'))) {
					uni.showLoading({
						title: '正在支付....'
					})
					const token = uni.getStorageSync('token')
					const code = this.getUrlParam('code')
					uni.request({
						url: `${config.api_base_url}member/member/openid/${code}`,
						header: {
							'Content-Type': 'application/json'
						},
						success: ((res) => {
							let {
								status,
								data
							} = res.data
							if (status.flag === true) {
								uni.setStorageSync('openId', data.openid)
								if (!token) {
									uni.request({
										url: `${config.api_base_url}member/member/login/openId`,
										data: {
											openId: data.openid
										},
										method: 'POST',
										success: ((res_n) => {
											let {
												status,
												data
											} = res_n.data
											if (status.flag === true) {
												uni.setStorageSync('role', data.role)
												uni.setStorageSync('token', data.token)
												uni.setStorageSync('memberId', data.memberId)
												this._openWXSM(obj)
											}
										})
									})
								} else {
									this._openWXSM(obj)
								}
							}
						})
					})
				} else if (uni.getStorageSync('openId')) {
					uni.showLoading({
						title: '正在支付....'
					})
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.request({
							url: `${config.api_base_url}member/member/login/openId`,
							data: {
								openId: uni.getStorageSync('openId')
							},
							method: 'POST',
							success: ((res_n) => {
								let {
									status,
									data
								} = res_n.data
								if (status.flag === true) {
									uni.setStorageSync('role', data.role)
									uni.setStorageSync('token', data.token)
									uni.setStorageSync('memberId', data.memberId)
									this._openWXSM(obj)
								}
							})
						})
					} else {
						this._openWXSM(obj)
					}
				}
				// #endif
			},
			_openWXSM(obj) {
				uni.hideLoading()
				uni.request({
					url: `${config.api_base_url}orders/pay/config`,
					method: 'POST',
					data: {
						url: location.href
					},
					success: ((res) => {
						let {
							status,
							data
						} = res.data
						if (status.flag === true) {
							jweixin.config({
								debug: false,
								appId: data.appid, // 必填，公众号的唯一标识
								timestamp: data.timestamp, // 必填，生成签名的时间戳
								nonceStr: data.nonceStr, // 必填，生成签名的随机串
								signature: data.signature, // 必填，签名，见附录1
								jsApiList: [
									'checkJsApi',
									'chooseWXPay'
								]
							});
							jweixin.ready(() => {
								const id = obj.id
								const rate = obj.rate
								const payment = 10
								const openId = uni.getStorageSync('openId')
								const price = obj.price
								const payAmount = obj.payAmount

								uni.request({
									url: `${config.api_base_url}orders/pay/pay`,
									header: {
										'Content-Type': 'application/json'
									},
									method: 'POST',
									data: {
										ordersId: id,
										payAmount: payAmount,
										rate: rate,
										payment: payment,
										openId: openId,
										price: price,
										memberId: uni.getStorageSync('memberId')
									},
									success: ((res_1) => {
										let {
											status,
											data
										} = res_1.data
										if (status.flag === true) {
											jweixin.chooseWXPay({
												timestamp: data.timeStamp, // 支付签名时间戳
												nonceStr: data.nonceStr, // 支付签名随机串，不长于32 位
												package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
												signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
												paySign: data.paySign, // 支付签名
												success: (() => {
													uni.navigateTo({
														url: `../paysuccess/paysuccess?storeId=${this.storeId}&payAmount=${payAmount}`
													})
												}),
												fail: ((err) => {
													console.log(err)
												})
											})
										} else {
											uni.showToast({
												icon: 'none',
												title: status.flag
											})
										}
									}),
									fail: (() => {
										uni.showToast({
											icon: 'none',
											title: '请求失败, 网络异常'
										})
									})
								})
							})
							jweixin.error((err) => {
								console.log(err)
							})
						}
					})
				})
			},
			// 取消订单，取消订单跟删除是不一样的，取消了，是针对未支付的订单去说的
			// 取消了以后，就跑到了已关闭的单子里面去了
			onClickCancelItem(item) {
				uni.showModal({
					content: '是否要取消该订单',
					success: ((res) => {
						if (res.confirm) {
							uni.request({
								url: `${config.api_base_url}orders/orders/cancelOrCloseOrders/${item.id}`,
								method: 'PUT',
								header: {
									AUTH: 'ROBOT ' + uni.getStorageSync('token')
								},
								data: {},
								success: ((res) => {
									let {
										status,
										data
									} = res.data
									console.log(status, data)
								})
							})
						}
					})
				})
			},
			// item是对象的本身
			// num是决定你删除的是【全部】【未支付0】【已支付1】【已关闭2】
			onClickDelItem(item, num) {
				uni.showModal({
					content: '是否要删除该订单',
					success: res => {
						if (res.confirm) {
							uni.request({
								url: `${config.api_base_url}orders/orders/deleteOrders/${item.id}`,
								method: 'PUT',
								header: {
									AUTH: 'ROBOT ' + uni.getStorageSync('token')
								},
								data: {},
								success: res => {
									let {
										status,
										data
									} = res.data;
									if (status.flag === true) {
										uni.showToast({
											icon: 'none',
											title: '删除成功'
										});
										if (num === undefined) {
											this.allOrderList = []
											this.allPage = 1
											this.allSize = 10
											this.allTotal = 0
											this.allTotalPage = 0
											this._getAllOrderData()
										} else if (num === 0) {
											this.allOrderList = []
											this.allPage = 1
											this.allSize = 10
											this.allTotal = 0
											this.allTotalPage = 0

											this._getAllOrderData()
											this.noPayPage = 1
											this.noPaySize = 10
											this.noPayTotal = 0
											this.noPayTotalPage = 0
											this.noPayOrderList = []
											this._getNoPayOrderData()
										} else if (num === 1) {
											this.allOrderList = []
											this.allPage = 1
											this.allSize = 10
											this.allTotal = 0
											this.allTotalPage = 0
											this._getAllOrderData()

											this.alreadyPayPage = 1
											this.alreadyPaySize = 10
											this.alreadyPayTotal = 0
											this.alreadyPayTotalPage = 0
											this.alreadyPayOrderList = []
											this._getAlreadyPayOrderData()
										} else if (num === 2) {
											this.allOrderList = []
											this.allPage = 1
											this.allSize = 10
											this.allTotal = 0
											this.allTotalPage = 0
											this._getAllOrderData()

											this.closePayPage = 1
											this.closePaySize = 10
											this.closePayTotal = 0
											this.closePayTotalPage = 0
											this.closePayOrderList = []
											this._getClosePayOrderData()
										}
									} else {
										uni.showToast({
											icon: 'none',
											title: status.msg
										});
									}
								},
								fail: () => {
									uni.showToast({
										icon: 'none',
										title: '无法删除, 网络异常'
									});
								}
							});
						}
					}
				});
			},
			onClickSelectIndex(index) {
				if (index === this.selectIndex) {
					return false;
				}
				this.selectIndex = index;
			},
			pageTotal(rowCount, pageSize) {
				if (rowCount === null || rowCount === '') {
					return 0;
				} else {
					if (pageSize !== 0 && rowCount % pageSize === 0) {
						return parseInt(rowCount / pageSize);
					}
					if (pageSize !== 0 && rowCount % pageSize !== 0) {
						return parseInt(rowCount / pageSize) + 1;
					}
				}
			},
			// 全部订单
			_getAllOrderData() {
				const page = this.allPage;
				const size = this.allSize;
				uni.request({
					url: `${config.api_base_url}orders/orders/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					success: res => {
						let {
							status,
							data
						} = res.data;
						if (status.flag === true) {
							this.allTotal = data.total;
							this.allTotalPage = this.pageTotal(this.allTotal, this.allSize);
							this.allOrderList = this.allOrderList.concat(data.rows);
						} else {
							this.allOrderList = [];
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败, 网络异常',
							icon: 'none'
						});
					},
					complete: () => {
						uni.stopPullDownRefresh();
					}
				});
			},
			// 没有支付的订单
			_getNoPayOrderData() {
				const page = this.noPayPage;
				const size = this.noPaySize;
				uni.request({
					url: `${config.api_base_url}orders/orders/payment/0/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					success: res => {
						let {
							status,
							data
						} = res.data;
						if (status.flag === true) {
							this.noPayTotal = data.total;
							this.noPayTotalPage = this.pageTotal(this.noPayTotal, this.noPaySize);
							this.noPayOrderList = this.noPayOrderList.concat(data.rows);
						} else {
							this.noPayOrderList = [];
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败, 网络异常',
							icon: 'none'
						});
					},
					complete: () => {
						uni.stopPullDownRefresh();
					}
				});
			},
			// 已支付的订单
			_getAlreadyPayOrderData() {
				const page = this.alreadyPayPage;
				const size = this.alreadyPaySize;
				uni.request({
					url: `${config.api_base_url}orders/orders/payment/1/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					success: res => {
						let {
							status,
							data
						} = res.data;
						if (status.flag === true) {
							this.alreadyPayTotal = data.total;
							this.alreadyPayTotalPage = this.pageTotal(this.alreadyPayTotal, this.alreadyPaySize);
							this.alreadyPayOrderList = this.alreadyPayOrderList.concat(data.rows);
						} else {
							this.alreadyPayOrderList = [];
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败, 网络异常',
							icon: 'none'
						});
					},
					complete: () => {
						uni.stopPullDownRefresh();
					}
				});
			},
			// 关闭的订单
			_getClosePayOrderData() {
				const page = this.closePayPage;
				const size = this.closePaySize;
				uni.request({
					url: `${config.api_base_url}orders/orders/payment/2/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					success: res => {
						let {
							status,
							data
						} = res.data;
						if (status.flag === true) {
							this.closePayTotal = data.total;
							this.closePayTotalPage = this.pageTotal(this.closePayTotal, this.closePaySize);
							this.closePayOrderList = this.closePayOrderList.concat(data.rows);
						} else {
							this.closePayOrderList = [];
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败, 网络异常',
							icon: 'none'
						});
					},
					complete: () => {
						uni.stopPullDownRefresh();
					}
				});
			},
			// 全部订单
			onScrolltolowerAllOrderList() {
				const page1 = this.allPage + 1;
				const totalPage = this.allTotalPage;
				if (page1 <= totalPage) {
					this.allPage = page1;
					this._getAllOrderData();
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					});
				}
			},
			// 未支付
			onScrolltolowerNoPayOrderList() {
				const page1 = this.noPayPage + 1;
				const totalPage = this.noPayTotalPage;
				if (page1 <= totalPage) {
					this.noPayPage = page1;
					this._getNoPayOrderData();
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					});
				}
			},
			// 已支付的
			onScrolltolowerAlreadyPayOrderList() {
				const page1 = this.alreadyPayPage + 1;
				const totalPage = this.alreadyPayTotalPage;
				if (page1 <= totalPage) {
					this.alreadyPayPage = page1;
					this._getAlreadyPayOrderData();
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					});
				}
			},
			// 关闭的订单
			onScrolltolowerClosePayOrderList() {
				const page1 = this.closePayPage + 1;
				const totalPage = this.closePayTotalPage;
				if (page1 <= totalPage) {
					this.closePayPage = page1;
					this._getClosePayOrderData();
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					});
				}
			},
			// 投诉商家
			onClickTSSJ(obj) {
				if (!obj.storeId) {
					return false;
				}
				uni.navigateTo({
					url: `../complaintsmerchant/complaintsmerchant?storeid=${obj.storeId}&storename=${obj.storeName}`
				});
			},
			onClickGotoPLPage(item, flag) {
				if (!item.storeId) {
					return false;
				}
				if (!item.id) {
					return false;
				}
				if (!item.storeName) {
					return false;
				}
				uni.navigateTo({
					url: `../gotoappraise/gotoappraise?ordersId=${item.id}&storeId=${item.storeId}&storeName=${item.storeName}&flag=${flag}`
				});
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				});
				uni.reLaunch({
					url: '../verificationcodelogin/verificationcodelogin'
				})
				return false;
			}
			this._getAllOrderData();
			this._getNoPayOrderData();
			this._getAlreadyPayOrderData();
			this._getClosePayOrderData();
		},
		onShow() {
			// // #ifdef H5
			// window.history.pushState("", "", "#");
			// window.addEventListener("popstate", this.exitPage, false)
			// // #endif
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				});
				uni.reLaunch({
					url: '../verificationcodelogin/verificationcodelogin'
				})
				return false;
			}
		},
		onReady() {
			const that = this
			uni.getSystemInfo({
				success: ((res) => {
					let info = uni.createSelectorQuery().select(".order-title");
					info.boundingClientRect(function(data) {
						that.h5ListHeight = res.windowHeight - data.height // 小程序和H5是可以这么设置，但是到了自定义头部的时候，是不允许这么设置的
						that.appListHeight = res.windowHeight - res.statusBarHeight - 44 - data.height // app的height
					}).exec()
				})
			})
		},
		onPullDownRefresh() {
			if (this.selectIndex === 0) {
				this.allOrderList = [];
				this.allPage = 1;
				this.allSize = 10;
				this.allTotal = 0;
				this.allTotalPage = 0;
				this._getAllOrderData();
			} else if (this.selectIndex === 1) {
				this.noPayPage = 1;
				this.noPaySize = 10;
				this.noPayTotal = 0;
				this.noPayTotalPage = 0;
				this.noPayOrderList = [];
				this._getNoPayOrderData();
			} else if (this.selectIndex === 2) {
				this.alreadyPayPage = 1;
				this.alreadyPaySize = 10;
				this.alreadyPayTotal = 0;
				this.alreadyPayTotalPage = 0;
				this.alreadyPayOrderList = [];
				this._getAlreadyPayOrderData();
			} else if (this.selectIndex === 3) {
				this.closePayPage = 1;
				this.closePaySize = 10;
				this.closePayTotal = 0;
				this.closePayTotalPage = 0;
				this.closePayOrderList = [];
				this._getClosePayOrderData();
			}
		}
	};
</script>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>
<style scoped>
	.order {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.order-title {
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		box-sizing: border-box;
		border-top: 1px solid #eeeeee;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		z-index: 1;
	}

	.order-title-all {
		font-size: 28rpx;
		font-weight: 600;
		line-height: 64rpx;
		color: rgba(0, 0, 0, 0.85);
		line-height: 64rpx;
		text-align: center;
		width: 25%;
	}

	.order-title-middle {
		width: 2rpx;
		height: 28rpx;
		background-color: #eeeeee;
	}

	.order-title-nocomment {
		font-size: 28rpx;
		font-weight: 600;
		line-height: 64rpx;
		color: rgba(0, 0, 0, 0.85);
		line-height: 64rpx;
		text-align: center;
		width: 25%;
	}

	.active {
		color: #f02230;
		position: relative;
	}

	.active::after {
		position: absolute;
		content: '';
		left: 50%;
		margin-left: -31rpx;
		bottom: -4rpx;
		width: 62rpx;
		height: 4rpx;
		background-color: #f02230;
		border-radius: 2rpx;
	}

	.order-list {
		box-sizing: border-box;
		padding-top: 20rpx;
		padding-left: 16rpx;
		padding-right: 14rpx;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.order-list-item {
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 38rpx;
		padding-bottom: 40rpx;
		padding-left: 42rpx;
		padding-right: 44rpx;
		margin-bottom: 16rpx;
	}

	.order-list-item:last-child {
		margin-bottom: 0;
	}

	.order-list-item-name {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.order-list-item-name-txt {
		font-size: 30rpx;
		font-weight: 600;
		line-height: 42rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.order-list-item-name-status {
		font-size: 24rpx;
		font-weight: 400;
		color: #ff8f1f;
		line-height: 34rpx;
	}

	.order-list-item-price {
		margin-top: 4rpx;
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.order-list-item-price-left {
		font-weight: 500;
		line-height: 42rpx;
		font-size: 30rpx;
		color: #999999;
		margin-right: 20rpx;
	}

	.order-list-item-price-right {
		font-weight: 500;
		line-height: 42rpx;
		font-size: 30rpx;
		color: #999999;
	}

	.order-list-item-line {
		width: 100%;
		height: 2rpx;
		background-color: #eee;
	}

	.order-list-item-content {
		padding-top: 28rpx;
		box-sizing: border-box;
		width: 100%;
		display: flex;
	}

	.order-list-item-content-avatar {
		width: 86rpx;
		height: 86rpx;
		border-radius: 4rpx;
		border: 2rpx solid #979797;
		margin-left: 0;
	}

	.order-list-item-content-info {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		margin-right: auto;
		flex: 1;
	}

	.order-list-item-content-info-ordernum {
		font-size: 24rpx;
		line-height: 34rpx;
		color: #999999;
		margin-bottom: 6rpx;
		font-weight: 400;
	}

	.order-list-item-content-info-ordernum:last-child {
		margin-bottom: 0;
	}

	.order-list-item-content-info-ordernum-last {
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
	}

	.order-list-item-content-info-ordernum-last-zlyd {
		box-sizing: border-box;
		height: 42rpx;
		border: 2rpx solid #f02230;
		color: #f02230;
		line-height: 42rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-right: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.order-list-item-content-info-ordernum-last-zlyd:last-child {
		margin-right: 0;
		margin-left: 0;
	}

	.order-list-item-content-info-ordernum-last-del {
		box-sizing: border-box;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		border: 2rpx solid #979797;
		color: #999999;
		border-radius: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		margin-right: 0;
	}

	.noorder {
		width: 100%;
		height: calc(100vh - 44px);
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 387rpx;
	}

	.noorder-img {
		width: 316rpx;
		height: 272rpx;
		margin-bottom: 47rpx;
	}

	.noorder-txt {
		font-size: 20rpx;
		line-height: 25rpx;
		font-weight: 400;
		color: #cfcfcf;
	}
</style>
